<template>
  <template v-if="direction == 'left'">
    <div
      @click="toggle"
      :class="['fold_btn_max fold_btn_left', { active_left_hide: !show }]"
    >
      <div>
        <DoubleLeftOutlined v-show="show" />
        <DoubleRightOutlined v-show="!show" />
      </div>
    </div>
  </template>
  <template v-else>
    <div
      @click="toggle"
      :class="['fold_btn_max fold_btn_right', { active_right_hide: !show }]"
    >
      <div>
        <DoubleRightOutlined v-show="show" />
        <DoubleLeftOutlined v-show="!show" />
      </div>
    </div>
  </template>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { DoubleRightOutlined, DoubleLeftOutlined } from '@ant-design/icons-vue'
/**工具栏折叠按钮 */
export default defineComponent({
  name: 'FoldBtn',
  props: {
    direction: {
      type: String,
      default: 'left'
    },
    show: {
      type: Boolean,
      required: true,
      default: true
    }
  },
  emits: ['update:show'],
  components: {
    DoubleRightOutlined,
    DoubleLeftOutlined
  },
  setup(props, { emit }) {
    const toggle = () => emit('update:show', !props.show)
    return {
      toggle
    }
  }
})
</script>

<style lang="less" scoped>
@w: -16px;
@hideW: -20px;
.fold_btn_max {
  top: 21px;
  border-radius: 50%;
  position: absolute;
  width: 24px;
  color: #aaa;
  text-align: center;
  background: #fff;
  border: 1px solid #ccc;
  transform: translate(0, -50%);
  cursor: pointer;
}
.fold_btn_left {
  right: @w;
}
.fold_btn_right {
  left: @w;
}
.active_left_hide {
  right: @hideW;
  border-radius: 0px 50% 50% 0px;
  border-left: none;
}
.active_right_hide {
  left: @hideW;
  border-radius: 50% 0px 0px 50%;
  border-right: none;
}
</style>
